import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router/index'
import sectionGrid from './components/index/sectionGrid.vue'

import './utils/utils.js'
import record from './utils/stack.js'

Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.component('section-grid', sectionGrid);


new Vue({
  render: h => h(App),
  router,
  data(){
    return {
      layout: {
        currentView: [],
        undoList: [],
        rollbackList: []
      }
    }
  },
  methods: {
    enterStack(data) {
      console.log('enter stack');
      record.addRecord(JSON.parse(JSON.stringify(data)));
      this.updateData();
    },

    onUndo() {  // 撤销
        record.undoRecord();
        this.updateData();
    },
    onBack() { // 反撤销 => 回退
        record.rollbackRecord();
        this.updateData();
    },
    updateData() {
        this.layout.currentView = record.getTopValue();
        this.layout.undoList = record.getUndoStack();
        this.layout.rollbackList = record.getrollbackStack();
    },

    _correctWidth(datas){
      let status = datas.filter(item => item.tagName == 'el-col' && item.attrs.span !== 24).length === datas.length;
      if(status){
          let len = datas.length;
          datas.forEach(element => {
              if(element.attrs.style){
                  Vue.set(element.attrs.style, 'width', 100/len + '%');
              }else{
                  Vue.set(element.attrs, 'style', {width: 100/len + '%'});
              }
          });
      }
    }
  }
}).$mount('#app')
